<template>
  <div class="container">
    <div class="mainCon">
      <div class="waitTodoBox">
        <div class="titleInfo">待办事项</div>
        <div class="checkPeding">
          <div class="img">
            <img src="/static/img/interfacePlatform/waitTodo.png" alt="" />
          </div>
          <div class="content">
            <div class="num">1234</div>
            <div class="discription">待审核账号数量</div>
          </div>
          <div class="quickReview" @click="toAccountManage">快速审核</div>
        </div>
      </div>
      <div class="spacing"></div>
      <div class="todayStatistics">
        <div class="titleInfo">今日接口统计</div>
        <!-- 列表 -->
        <el-table
          :data="tableData"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          stripe
          v-loading="loading"
          style="border: 1px solid #dfe6ec"
        >
          <el-table-column
            prop="projectName"
            label="应用类型"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            prop="areaName"
            label="版本号"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            prop="shouldPay,bankActPay"
            label="处理成功次数"
            :formatter="formatTd"
          >
            <template slot-scope="scope">
              <span style="color: #5fab2b">{{
                scope.row.shouldPay || '0'
              }}</span
              >/{{ scope.row.bankActPay || '0' }}
            </template>
          </el-table-column>
          <el-table-column
            prop="shouldPay,bankActPay"
            label="处理失败次数"
            :formatter="formatTd"
          >
            <template slot-scope="scope">
              <span style="color: #ff4242">{{
                scope.row.shouldPay || '0'
              }}</span
              >/{{ scope.row.bankActPay || '0' }}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="left" :formatter="formatTd">
            <template slot-scope="scope">
              <el-link type="primary">查看详情</el-link>
            </template>
          </el-table-column>
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="isShow">
            <emptyTable emptyText="暂无相关信息"></emptyTable>
          </div>
        </el-table>
        <Pagination
          ref="pagination"
          @getList="getTableList"
          :requestUrl="requestUrl"
          @getpageSize="getpageSize"
          @getpageNo="getpageNo"
        ></Pagination>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'interfaceAccountTechnical',
  data() {
    return {
      titleText: '首页',
      requestUrl: 'api-d/trinomial/expand/list',
      loading: true,
      isShow: false,
      tableData: [], //表格数据
      pageSize: 20,
      pageNo: 1,
    }
  },
  created() {
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData()
    })
  },
  methods: {
    getpageSize(val) {
      this.pageSize = val
    },
    getpageNo(val) {
      this.pageNo = val
    },
    getTableList(data) {
      this.tableData = data
      this.loading = false
      if (this.tableData.length < 1) {
        this.isShow = true
      }
    },
    toAccountManage() {
      alert('账号管理')
    },
  },
}
</script>

<style lang="less" scoped>
.mainCon {
  top: 130px;
  padding: 0;
  .titleInfo {
    font: 16px/50px Microsoft YaHei;
    &::before {
      display: inline-block;
      width: 4px;
      height: 24px;
      background: #17a487;
      content: '';
      //这个指为正的话 小方块就往上， 为负的话，小方块就往下
      vertical-align: -5px;
      margin-right: 15px;
    }
  }
  .waitTodoBox {
    padding: 10px 24px 24px 24px;
    .checkPeding {
      width: 376px;
      height: 98px;
      padding: 24px;
      background: #f5f7fb;
      border-radius: 4px;
      margin-top: 10px;
      .img {
        float: left;
        width: 50px;
        img {
          width: 50px;
          height: 50px;
        }
      }
      .content {
        float: left;
        margin-left: 24px;
        .num {
          font-size: 24px;
          color: #333333;
          font-weight: 700;
        }
        .discription {
          margin-top: 8px;
          font-size: 14px;
          color: #666666;
        }
      }
      .quickReview {
        float: right;
        padding: 6px 7px;
        background: #009588;
        border-radius: 4px;
        font-size: 14px;
        color: #ffffff;
        text-align: center;
        margin-top: 12px;
      }
    }
  }
  .spacing {
    width: 100%;
    height: 10px;
    background-color: #f5f7fa;
  }
  .todayStatistics {
    padding: 10px 24px;
    .titleInfo {
      padding: 0 0 10px 0;
    }
  }
}
</style>
